<template>
	<div class="warning-rules-page" style="padding: 20px;">
		<el-row :gutter="10" style="margin-bottom: 12px;">
			<el-col :span="4">
				<el-select v-model="filterType" placeholder="指标类型" clearable>
					<el-option v-for="t in types" :key="t" :label="t" :value="t" />
				</el-select>
			</el-col>
			<el-col :span="4">
				<el-select v-model="filterLevel" placeholder="预警等级" clearable>
					<el-option label="高" value="高" />
					<el-option label="中" value="中" />
					<el-option label="低" value="低" />
				</el-select>
			</el-col>
			<el-col :span="4">
				<el-input v-model="search" placeholder="搜索设备/备注" clearable />
			</el-col>
			<el-col :span="6">
				<el-button type="primary" size="small" @click="openDialog()">新增规则</el-button>
				<el-button type="success" size="small" @click="exportExcel">导出规则</el-button>
				<el-button size="small" @click="resetFilter">重置</el-button>
			</el-col>
		</el-row>

		<el-table :data="filteredList" border stripe>
			<el-table-column prop="type" label="指标类型" width="100" />
			<el-table-column prop="device" label="设备类型" width="110" />
			<el-table-column prop="threshold" label="预警条件" width="120" />
			<el-table-column prop="level" label="预警等级" width="100">
				<template #default="{ row }">
					<el-tag :type="levelColor(row.level)">{{ row.level }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="enabled" label="启用" width="80">
				<template #default="{ row }">
					<el-switch v-model="row.enabled" />
				</template>
			</el-table-column>
			<el-table-column prop="note" label="备注" />
			<el-table-column label="操作" width="160">
				<template #default="{ $index }">
					<el-button type="primary" size="small" @click="openDialog($index)">编辑</el-button>
					<el-button type="danger" size="small" @click="remove($index)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 弹窗 -->
		<el-dialog v-model="dialogVisible" :title="editingIndex === null ? '新增规则' : '编辑规则'" width="500px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="指标类型">
					<el-select v-model="form.type" placeholder="请选择" @change="form.device = ''">
						<el-option v-for="t in types" :key="t" :label="t" :value="t" />
					</el-select>
				</el-form-item>
				<el-form-item label="设备类型">
					<el-select v-model="form.device" placeholder="请选择" filterable>
						<el-option v-for="d in deviceMap[form.type]" :key="d" :label="d" :value="d" />
					</el-select>
				</el-form-item>
				<el-form-item label="预警条件">
					<el-input v-model="form.threshold" />
				</el-form-item>
				<el-form-item label="等级">
					<el-select v-model="form.level">
						<el-option label="高" value="高" />
						<el-option label="中" value="中" />
						<el-option label="低" value="低" />
					</el-select>
				</el-form-item>
				<el-form-item label="是否启用">
					<el-switch v-model="form.enabled" />
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="form.note" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveRule">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import * as XLSX from 'xlsx'
import { ElMessage } from 'element-plus'

const types = ['电', '水', '气']
const deviceMap = {
	电: ['空调', '照明', '电梯', '插座', '新风'],
	水: ['饮水机', '洗手间', '加湿器'],
	气: ['锅炉', '燃气灶', '热水器']
}

const rules = ref([])
for (let i = 0; i < 15; i++) {
	const type = types[i % 3]
	const device = deviceMap[type][Math.floor(Math.random() * deviceMap[type].length)]
	rules.value.push({
		type,
		device,
		threshold: `${['功率', '用量', '频率'][i % 3]} > ${50 + i * 3}`,
		level: ['高', '中', '低'][i % 3],
		note: `模拟规则 ${i + 1}`,
		enabled: i % 2 === 0
	})
}

const form = reactive({
	type: '电',
	device: '',
	threshold: '',
	level: '中',
	note: '',
	enabled: true
})
const dialogVisible = ref(false)
const editingIndex = ref(null)
const filterType = ref('')
const filterLevel = ref('')
const search = ref('')

const filteredList = computed(() =>
	rules.value.filter(r =>
		(!filterType.value || r.type === filterType.value) &&
		(!filterLevel.value || r.level === filterLevel.value) &&
		(!search.value || r.device.includes(search.value) || r.note.includes(search.value))
	)
)

function openDialog(index = null) {
	if (index !== null) {
		Object.assign(form, rules.value[index])
	} else {
		Object.assign(form, {
			type: '电', device: '', threshold: '', level: '中', note: '', enabled: true
		})
	}
	editingIndex.value = index
	dialogVisible.value = true
}

function saveRule() {
	const item = { ...form }
	if (editingIndex.value === null) {
		rules.value.push(item)
		ElMessage.success('新增成功')
	} else {
		rules.value[editingIndex.value] = item
		ElMessage.success('编辑成功')
	}
	dialogVisible.value = false
}

function remove(index) {
	rules.value.splice(index, 1)
	ElMessage.success('已删除')
}

function exportExcel() {
	const rows = [['指标类型', '设备类型', '预警条件', '预警等级', '备注', '是否启用']]
	for (const r of filteredList.value) {
		rows.push([r.type, r.device, r.threshold, r.level, r.note, r.enabled ? '是' : '否'])
	}
	const ws = XLSX.utils.aoa_to_sheet(rows)
	const wb = XLSX.utils.book_new()
	XLSX.utils.book_append_sheet(wb, ws, '预警规则')
	XLSX.writeFile(wb, '预警规则列表.xlsx')
}

function levelColor(level) {
	return level === '高' ? 'danger' : level === '中' ? 'warning' : 'success'
}

function resetFilter() {
	filterType.value = ''
	filterLevel.value = ''
	search.value = ''
}
</script>

<style scoped>
.warning-rules-page {
	max-width: 1200px;
	margin: auto;
}
</style>
